<template>
  <div class="toolbarBox">
    <affix label="工具栏设置" style="padding-bottom: 0px"></affix>
    <configCompositionTwoWindowStyle :leftWidth="12" :rightWidth="12" :height="240">
      <template slot="card">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane v-for="(item, index) in tabArr" :key="index" :label="item.label" :name="item.name">
            <div style="margin-right: 20px;">
              <diyTable :tableHeader="tableHeader" :tableData="tableData" :type="'toolbar'" v-loading="refreshLoading" @updata="updata" @del="del" @add="add">
                <template slot="column">
                  <template v-for="(item, index) in tableHeader">
                    <el-table-column v-if="item.prop === 'switch'" :key="index" :prop="item.prop" :label="item.label">
                      <template slot-scope="scope">
                        <el-switch
                          @change="switchChange($event, scope.row)"
                          v-model="scope.row.switch"
                          active-color="#459ae9"
                          inactive-color="#ccc">
                        </el-switch>
                      </template>
                    </el-table-column>
                  </template>
                </template>
              </diyTable>
            </div>
          </el-tab-pane>
        </el-tabs>
      </template>
      <template slot="detail">
        <div style="margin-left: 20px;" v-if="isShowDetail">
          <breadCrumb :titleArr="titleArr" @back="back"></breadCrumb>
          <div class="toolbarFrom">
            <el-form :model="toolbarFrom" :rules="rules" ref="toolbarFrom" label-position="top" label-width="120px">
              <el-form-item label="名称：" class="item" prop="name">
                <el-input :maxlength=20 v-model.trim="toolbarFrom.name" :placeholder="$t('public.pleaseInput')"></el-input>
              </el-form-item>
              <el-form-item label="地址：" class="item" prop="url" v-if="!toolbarFrom.moreRadio">
                <el-input v-model.trim="toolbarFrom.url" :placeholder="$t('public.pleaseInput')"></el-input>
              </el-form-item>
              <el-form-item class="item">
                <div class="moreConfig" @click="moreConfigFun">更多设置<span :class="toolbarFrom.moreConfig ? 'el-icon-arrow-right' : 'el-icon-arrow-down'"></span></div>
              </el-form-item>
              <el-form-item class="item" label="是否开启更多业务选择" v-if="!toolbarFrom.moreConfig">
                <el-radio v-model="toolbarFrom.moreRadio" :label="false">否</el-radio>
                <el-radio v-model="toolbarFrom.moreRadio" :label="true">是</el-radio>
              </el-form-item>
              <el-form-item class="item" v-if="!toolbarFrom.moreConfig && toolbarFrom.moreRadio">
                <div class="moreBox" v-for="(item, index) in moreBoxArr" :key="index">
                  <div class="floatLeft" style="marginRight: 10px">
                    <div class="moreLabel floatLeft">名称：</div>
                    <el-input :maxlength=20 v-model.trim="item.name" placeholder="请输入名称"></el-input>
                  </div>
                  <div class="floatLeft">
                    <div class="moreLabel floatLeft">URL：</div>
                    <el-input v-model.trim="item.url" placeholder="请输入URL"></el-input>
                  </div>
                  <div class="el-icon-circle-plus-outline icont add floatLeft" @click="moreAdd"></div>
                  <div class="el-icon-remove-outline icont del floatLeft" @click="moreDel(index)" v-if="index > 0"></div>
                </div>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" class="primary_btn" @click="submitForm">{{$t('public.save')}}</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </template>
    </configCompositionTwoWindowStyle>
  </div>
</template>
<script>
  import Affix from '../../../../ui-modules/affix/Affix.vue'
  import diyTable from '../base/diyTable'
  import breadCrumb from '../../../../ui-modules/breadCrumb/BreadCrumbConfig.vue'
  import configCompositionTwoWindowStyle from '../../../../ui-modules/config/configCompositionTwoWindowStyle'
  export default {
    name: "toolbarConfig",
    components: {
      Affix,
      breadCrumb,
      diyTable,
      configCompositionTwoWindowStyle
    },
    data () {
      return {
        rules: {
          name: [{required: true, message: '请输入名称', trigger: 'blur'}]
        },
        refreshLoading: false,
        isShowDetail: false,
        activeName: 'call',
        tabArr: [
          {name: 'call', label: '通话'},
          {name: 'im', label: '在线'},
          {name: 'customer', label: '客户'},
          {name: 'business', label: '工单'},
        ],
        tableData: [],
        addOrEdit: 'add',
        titleArr: ['工具栏设置', '新增'],
        tableHeader: [
          {prop: 'name', label: '名称'},
          {prop: 'switch', label: '状态'},
          {prop: 'operate', label: this.$t('public.operate')}
        ],
        toolbarFrom: {
          show: true,
          _id: '',
          url: 'http://',
          moreConfig: true,
          moreRadio: false,
          name: ''
        },
        moreBoxArr: [
          {name: '', url: 'http://'}
        ]
      }
    },
    methods: {
      handleClick (val, event) {
        this.queryTable(val.name)
      },
      switchChange (event, row) {
        let data = {
          module: this.activeName,
          _id: row._id,
          show: event
        }
        this.$store.dispatch('showHideTab', data).then(res => {
          if (res && res.success) {
            this.$message.success('变更状态成功')
          }
        })
      },
      moreConfigFun () {
        this.toolbarFrom.moreConfig = !this.toolbarFrom.moreConfig
      },
      back () {
        this.isShowDetail = false
      },
      moreAdd () {
        this.moreBoxArr.push({name: '', url: 'http://'})
      },
      moreDel (index) {
        this.moreBoxArr.splice(index, 1)
      },
      add () {
        this.titleArr.splice(1, 1, '添加')
        this.addOrEdit = 'add'
        this.isShowDetail = true
        this.toolbarFrom.moreRadio = false
        this.toolbarFrom.moreConfig = true
        this.toolbarFrom.name = ''
        this.toolbarFrom.url = 'http://'
        this.toolbarFrom.show = true
        this.toolbarFrom._id = ''
        this.moreBoxArr = [{name: '', url: 'http://'}]
      },
      del (val) {
        let data = {
          module: this.activeName,
          _id: val._id
        }
        this.$store.dispatch('delCustomTab', data).then(res => {
          if (res && res.success) {
            this.queryTable(this.activeName)
            this.isShowDetail = false
            this.$message.success('删除成功')
          }
        })
      },
      updata (val) {
        this.addOrEdit = 'edit'
        this.titleArr = ['工具栏设置', '编辑']
        if (val.businesses && val.businesses.length > 0) {
          this.moreBoxArr = val.businesses
          this.toolbarFrom.url = 'http://'
          this.toolbarFrom.moreConfig = false
          this.toolbarFrom.moreRadio = true
        } else {
          this.toolbarFrom.moreConfig = true
          this.toolbarFrom.moreRadio = false
          this.toolbarFrom.url = val.url
          this.moreBoxArr = [{name: '', url: 'http://'}]
        }
        this.toolbarFrom._id = val._id
        this.toolbarFrom.show = val.show
        this.toolbarFrom.name = val.name
        this.isShowDetail = true
      },
      submitForm () {
        let {name, url, moreRadio, show, _id} = this.toolbarFrom
        let data = {
          module: this.activeName,
          tab: {
            _id: _id,
            name,
            url,
            show: show,
            businesses: this.moreBoxArr
          }
        }
        if (this.addOrEdit === 'add') {
          delete data.tab._id
        }
        if (!moreRadio) {
          delete data.tab.businesses
        } else {
          delete data.tab.url
        }
        let rep = new RegExp(/^((http|ftp|https):\/\/)(([a-zA-Z0-9._-]+\.[a-zA-Z]{2,6})|([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}))(:[0-9]{1,4})*(\/[a-zA-Z0-9&%_./-~-]*)?/)
        if (data.tab.url && !rep.test(data.tab.url)) {
          this.$message.error(this.$t('configLazyLoad.interfaceConfig.urlIncorrect'))
          return false
        }
        let tabBusiness = data.tab.businesses
        if (tabBusiness) {
          for (let i = 0; i < tabBusiness.length; i++) {
            if (tabBusiness[i].url && !rep.test(tabBusiness[i].url)) {
              this.$message.error(this.$t('configLazyLoad.interfaceConfig.urlIncorrect'))
              return false
            }
          }
        }
        this.$refs.toolbarFrom.validate(val => {
          if (val) {
            this.$store.dispatch('saveCustomTab', data).then(res => {
              if (res && res.success) {
                this.isShowDetail = false
                this.queryTable(this.activeName)
                this.$message.success('保存成功')
              } else if (res.message === 'custom_toolbar_tab_exists') {
                this.$message.error('名称重复，请重新填写')
              }
            })
          }
        })
      },
      queryTable (type) {
        this.$store.dispatch('queryModuleTabs', {module: type}).then(res => {
          if (res.data && res.success && res.data.tabs) {
            res.data.tabs.forEach(item => {
              item.name = this.$t(item.name)
              item.switch = item.show
            })
            this.tableData = res.data.tabs
          }
        })
      }
    },
    beforeMount () {
      this.queryTable('call')
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .toolbarBox
    padding 20px
    .toolbarFrom
      padding 20px
      width 450px
      .el-input,.el-select
        max-width 220px
    .item
      margin-bottom 10px
    .moreConfig
      cursor pointer
      font-size 12px
    .moreBox
      clear both
      overflow hidden
    .moreLabel
      font-size 12px
      height 30px
    .floatLeft
      float left
    .icont
      margin-left 10px
      cursor pointer
      height 51px
      line-height 104px
    .add
      color #459AE9
    .del
      color red
</style>
<style lang="stylus">
  .toolbarBox
    .el-tabs__header
      border-bottom none
</style>

